<template>
  <div
    id="J_prismPlayer"
    style="
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    "
  ></div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "AliPlayer",
  data() {
    return {
      player: null
    };
  },
  watch: {
    url(newRtsUrl) {
      if (newRtsUrl) {
        this.setVideo(newRtsUrl);
      }
    }
  },
  computed: {
    ...mapState("player", ["url"])
  },
  beforeDestroy() {
    this.closeVideo();
  },
  mounted() {
    this.setVideo(this.url);
  },
  methods: {
    setVideo(url) {
      console.log("当前使用的url", url);
      if (this.player != null) {
        this.player.source = url;
        return;
      }
      this.player = window.Aliplayer({
        id: "J_prismPlayer",
        source: url,
        isLive: true,
        preload: true,
        autoplay: true,
        // 其他配置
        controlBarVisibility: "none", // "hover" 表示鼠标悬停时显示，可以设置为 "always" 表示一直显示，或 "none" 表示不显示
        skinLayout: [
          {
            name: "H5Loading",
            align: "cc"
          },
          {
            name: "controlBar",
            align: "blabs",
            x: 0,
            y: 0,
            children: []
          }
        ]
      });
      this.player.on("rtsTraceId", function(event) {
        console.log("EVENT rtsTraceId", event.paramData);
      });
      this.player.on("error", event => {
        this.$store.dispatch("player/handleUrl");
        console.error("Player Error:", event);
      });
      this.player.on("rtsFallback", function(event) {
        console.log(" EVENT rtsFallback", event.paramData);
      });
    },
    closeVideo() {
      if (this.player != null) {
        this.player.dispose(); // 关闭视频
        this.player = null; // 重置 player 变量
      }
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>
